<template>
  <div>
    <!-- 头部创建区域 - 参考Google Forms设计 -->
    <div class="gva-create-section">
      <div class="create-header">
        <h2>创建新表单</h2>
        <p>从模板开始或创建空白表单</p>
      </div>
      
      <!-- 快速创建区域 -->
      <div class="quick-create">
        <div class="create-blank" @click="createBlankForm">
          <div class="blank-form-icon">
            <el-icon size="48"><Document /></el-icon>
          </div>
          <p>空白表单</p>
        </div>
        
        <!-- 模板选择区域 -->
        <div class="template-gallery">
          <h3>选择模板</h3>
          <div class="template-categories">
            <el-tabs v-model="activeTemplateTab" @tab-click="handleTemplateTabClick">
              <el-tab-pane label="推荐" name="recommended">
                <div class="template-grid">
                  <div v-for="template in recommendedTemplates" :key="template.id" 
                       class="template-card" @click="createFromTemplate(template)">
                    <div class="template-preview">
                      <el-icon size="32"><component :is="template.icon" /></el-icon>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.title }}</h4>
                      <p>{{ template.description }}</p>
                      <span class="usage-count">{{ template.usageCount }} 次使用</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="问卷调查" name="survey">
                <div class="template-grid">
                  <div v-for="template in surveyTemplates" :key="template.id" 
                       class="template-card" @click="createFromTemplate(template)">
                    <div class="template-preview">
                      <el-icon size="32"><component :is="template.icon" /></el-icon>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.title }}</h4>
                      <p>{{ template.description }}</p>
                      <span class="usage-count">{{ template.usageCount }} 次使用</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="满意度调查" name="satisfaction">
                <div class="template-grid">
                  <div v-for="template in satisfactionTemplates" :key="template.id" 
                       class="template-card" @click="createFromTemplate(template)">
                    <div class="template-preview">
                      <el-icon size="32"><component :is="template.icon" /></el-icon>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.title }}</h4>
                      <p>{{ template.description }}</p>
                      <span class="usage-count">{{ template.usageCount }} 次使用</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="活动报名" name="registration">
                <div class="template-grid">
                  <div v-for="template in registrationTemplates" :key="template.id" 
                       class="template-card" @click="createFromTemplate(template)">
                    <div class="template-preview">
                      <el-icon size="32"><component :is="template.icon" /></el-icon>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.title }}</h4>
                      <p>{{ template.description }}</p>
                      <span class="usage-count">{{ template.usageCount }} 次使用</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的表单列表 -->
    <div class="gva-forms-section">
      <div class="section-header">
        <h2>我的表单</h2>
        <div class="view-options">
          <el-button-group>
            <el-button :type="viewMode === 'grid' ? 'primary' : ''" icon="grid" @click="viewMode = 'grid'">网格</el-button>
            <el-button :type="viewMode === 'list' ? 'primary' : ''" icon="list" @click="viewMode = 'list'">列表</el-button>
          </el-button-group>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="gva-search-box">
        <el-form ref="searchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">
          <el-form-item label="表单标题" prop="title">
            <el-input v-model="searchInfo.title" placeholder="搜索表单..." clearable />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="searchInfo.status" placeholder="所有状态" clearable>
              <el-option label="草稿" :value="0" />
              <el-option label="发布中" :value="1" />
              <el-option label="已关闭" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="search" @click="onSubmit">搜索</el-button>
            <el-button icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="forms-grid">
        <div v-for="form in tableData" :key="form.ID" class="form-card">
          <div class="form-card-header">
            <div class="form-preview" @click="previewForm(form)">
              <el-icon size="48"><Document /></el-icon>
              <div class="form-status-badge">
                <el-tag v-if="form.status === 0" type="info" size="small">草稿</el-tag>
                <el-tag v-if="form.status === 1" type="success" size="small">发布中</el-tag>
                <el-tag v-if="form.status === 2" type="danger" size="small">已关闭</el-tag>
              </div>
            </div>
          </div>
          <div class="form-card-content">
            <h3 class="form-title" @click="updateForm(form)">{{ form.title || '未命名表单' }}</h3>
            <p class="form-description">{{ form.description || '暂无描述' }}</p>
            <div class="form-stats">
              <span><el-icon><View /></el-icon> {{ form.submitCount || 0 }} 次提交</span>
              <span><el-icon><Clock /></el-icon> {{ formatDate(form.CreatedAt) }}</span>
            </div>
          </div>
          <div class="form-card-actions">
            <el-dropdown trigger="click">
              <el-button text>
                <el-icon><MoreFilled /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="updateForm(form)">
                    <el-icon><Edit /></el-icon> 编辑
                  </el-dropdown-item>
                  <el-dropdown-item @click="previewForm(form)">
                    <el-icon><View /></el-icon> 预览
                  </el-dropdown-item>
                  <el-dropdown-item @click="viewSubmissions(form)">
                    <el-icon><DataAnalysis /></el-icon> 查看数据
                  </el-dropdown-item>
                  <el-dropdown-item @click="copyFormLink(form)" v-if="form.status === 1">
                    <el-icon><Link /></el-icon> 复制链接
                  </el-dropdown-item>
                  <el-dropdown-item @click="publishForm(form)" v-if="form.status === 0">
                    <el-icon><Upload /></el-icon> 发布
                  </el-dropdown-item>
                  <el-dropdown-item @click="closeForm(form)" v-if="form.status === 1">
                    <el-icon><Close /></el-icon> 关闭
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="deleteForm(form)">
                    <el-icon><Delete /></el-icon> 删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        
        <!-- 创建新表单卡片 -->
        <div class="form-card create-new-card" @click="createBlankForm">
          <div class="create-new-content">
            <el-icon size="48"><Plus /></el-icon>
            <p>创建新表单</p>
          </div>
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-else class="gva-table-box">
        <el-table :data="tableData" @sort-change="sortChange" style="width: 100%">
          <el-table-column align="left" label="表单" min-width="200">
            <template #default="scope">
              <div class="form-info">
                <h4 @click="updateForm(scope.row)" class="form-title-link">{{ scope.row.title || '未命名表单' }}</h4>
                <p class="form-desc">{{ scope.row.description || '暂无描述' }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="100">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
              <el-tag v-if="scope.row.status === 1" type="success">发布中</el-tag>
              <el-tag v-if="scope.row.status === 2" type="danger">已关闭</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交数" width="100" prop="submitCount" sortable="custom" />
          <el-table-column align="center" label="创建时间" width="180" prop="CreatedAt" sortable="custom">
            <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="300">
            <template #default="scope">
                          <el-button type="primary" link icon="edit" size="small" @click="updateForm(scope.row)">编辑</el-button>
            <el-button type="info" link icon="view" size="small" @click="previewForm(scope.row)">预览</el-button>
            <el-button type="success" link icon="DataAnalysis" size="small" @click="viewSubmissions(scope.row)">数据</el-button>
              <el-button v-if="scope.row.status === 1" type="success" link icon="link" size="small" @click="copyFormLink(scope.row)">复制链接</el-button>
              <el-button v-if="scope.row.status === 0" type="success" link icon="upload" size="small" @click="publishForm(scope.row)">发布</el-button>
              <el-button v-if="scope.row.status === 1" type="warning" link icon="close" size="small" @click="closeForm(scope.row)">关闭</el-button>
              <el-button type="danger" link icon="delete" size="small" @click="deleteForm(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="gva-pagination" v-if="total > 0">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[12, 24, 48, 96]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- 模板预览对话框 -->
    <el-dialog v-model="templatePreviewVisible" title="模板预览" width="60%" @close="closeTemplatePreview">
      <div class="template-preview-content">
        <h3>{{ selectedTemplate?.title }}</h3>
        <p class="template-description">{{ selectedTemplate?.description }}</p>
        <div class="template-fields-preview">
          <div v-for="field in selectedTemplate?.fields" :key="field.id" class="field-preview">
            <label>{{ field.label }}</label>
            <div class="field-placeholder" :class="field.type">
              {{ getFieldPlaceholder(field.type) }}
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="templatePreviewVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreateFromTemplate">使用此模板</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { 
  getFormList, 
  deleteForm as deleteFormApi, 
  publishForm as publishFormApi, 
  closeForm as closeFormApi, 
  createForm } from '@/plugin/gva_intelligent_form/api/form.js'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDate } from '@/utils/format'
import { useRouter } from 'vue-router'
import { 
  Document, Plus, Edit, View, Delete, Upload, Close, MoreFilled, 
  Link, Clock, DataAnalysis
} from '@element-plus/icons-vue'

const router = useRouter()

// 视图模式
const viewMode = ref('grid')

// 模板相关
const activeTemplateTab = ref('recommended')
const templatePreviewVisible = ref(false)
const selectedTemplate = ref(null)

// 搜索相关
const searchInfo = ref({})
const searchFormRef = ref()

// 表格相关
const tableData = ref([])
const page = ref(1)
const pageSize = ref(12) // 网格视图适合较大的pageSize
const total = ref(0)

// 模板数据 - 参考问卷网的分类
const recommendedTemplates = ref([
  {
    id: 'customer-satisfaction',
    title: '客户满意度调查',
    description: '评估客户对产品或服务的满意程度',
    icon: 'Star',
    usageCount: 2341,
    category: 'satisfaction',
    fields: [
      { id: 1, label: '您的姓名', type: 'text' },
      { id: 2, label: '联系方式', type: 'text' },
      { id: 3, label: '总体满意度', type: 'rating' },
      { id: 4, label: '推荐意愿', type: 'radio' },
      { id: 5, label: '改进建议', type: 'textarea' }
    ]
  },
  {
    id: 'event-registration',
    title: '活动报名表',
    description: '收集活动参与者的报名信息',
    icon: 'Calendar',
    usageCount: 1876,
    category: 'registration',
    fields: [
      { id: 1, label: '姓名', type: 'text' },
      { id: 2, label: '手机号码', type: 'text' },
      { id: 3, label: '邮箱地址', type: 'email' },
      { id: 4, label: '公司/机构', type: 'text' },
      { id: 5, label: '参与场次', type: 'radio' }
    ]
  },
  {
    id: 'employee-feedback',
    title: '员工反馈调查',
    description: '收集员工对工作环境和管理的反馈',
    icon: 'User',
    usageCount: 1543,
    category: 'survey',
    fields: [
      { id: 1, label: '部门', type: 'select' },
      { id: 2, label: '工作年限', type: 'radio' },
      { id: 3, label: '工作满意度', type: 'rating' },
      { id: 4, label: '团队协作评价', type: 'rating' },
      { id: 5, label: '意见建议', type: 'textarea' }
    ]
  },
  {
    id: 'market-research',
    title: '市场调研问卷',
    description: '了解目标市场的需求和偏好',
    icon: 'PieChart',
    usageCount: 2156,
    category: 'survey',
    fields: [
      { id: 1, label: '年龄段', type: 'radio' },
      { id: 2, label: '收入水平', type: 'radio' },
      { id: 3, label: '购买频率', type: 'radio' },
      { id: 4, label: '品牌偏好', type: 'checkbox' },
      { id: 5, label: '其他建议', type: 'textarea' }
    ]
  }
])

const surveyTemplates = ref([
  {
    id: 'general-survey',
    title: '通用调研问卷',
    description: '适用于各种调研场景的通用模板',
    icon: 'ChatLineRound',
    usageCount: 1234,
    category: 'survey',
    fields: [
      { id: 1, label: '基本信息', type: 'text' },
      { id: 2, label: '选择题', type: 'radio' },
      { id: 3, label: '多选题', type: 'checkbox' },
      { id: 4, label: '开放问题', type: 'textarea' }
    ]
  }
])

const satisfactionTemplates = ref([
  {
    id: 'service-satisfaction',
    title: '服务满意度调查',
    description: '评估服务质量和客户体验',
    icon: 'TrophyBase',
    usageCount: 987,
    category: 'satisfaction',
    fields: [
      { id: 1, label: '服务评分', type: 'rating' },
      { id: 2, label: '推荐程度', type: 'rating' },
      { id: 3, label: '改进建议', type: 'textarea' }
    ]
  }
])

const registrationTemplates = ref([
  {
    id: 'training-registration',
    title: '培训报名表',
    description: '收集培训课程的报名信息',
    icon: 'User',
    usageCount: 654,
    category: 'registration',
    fields: [
      { id: 1, label: '姓名', type: 'text' },
      { id: 2, label: '联系方式', type: 'text' },
      { id: 3, label: '培训课程', type: 'select' },
      { id: 4, label: '特殊需求', type: 'textarea' }
    ]
  }
])

// 获取表单列表
const getTableData = async() => {
  const table = await getFormList({
    page: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value
  })
  if (table.code === 0) {
    tableData.value = table.data.list || []
    total.value = table.data.total || 0
    page.value = table.data.page || 1
    pageSize.value = table.data.pageSize || 12
  }
}

// 搜索
const onSubmit = () => {
  page.value = 1
  getTableData()
}

// 重置搜索
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 分页
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

// 排序
const sortChange = ({ prop, order }) => {
  if (prop) {
    searchInfo.value.orderKey = prop
    searchInfo.value.desc = order === 'descending'
  }
  getTableData()
}

// 创建空白表单
const createBlankForm = () => {
  router.push({ name: 'formEditor' })
}

// 从模板创建表单
const createFromTemplate = (template) => {
  selectedTemplate.value = template
  templatePreviewVisible.value = true
}

// 确认从模板创建
const confirmCreateFromTemplate = async() => {
  try {
    const formData = {
      title: selectedTemplate.value.title,
      description: selectedTemplate.value.description,
      formConfig: {
        fields: selectedTemplate.value.fields
      },
      themeConfig: {},
      isPublic: true,
      submitLimit: 0
    }
    
    const res = await createForm(formData)
    if (res.code === 0) {
      ElMessage.success('表单创建成功')
      templatePreviewVisible.value = false
      router.push({ name: 'formEditor', query: { id: res.data.ID } })
    }
  } catch (error) {
    ElMessage.error('创建失败：' + error.message)
  }
}

// 关闭模板预览
const closeTemplatePreview = () => {
  templatePreviewVisible.value = false
  selectedTemplate.value = null
}

// 获取字段占位符文本
const getFieldPlaceholder = (type) => {
  const placeholders = {
    text: '请输入文本',
    email: 'example@email.com',
    textarea: '请输入详细内容...',
    radio: '○ 选项1 ○ 选项2 ○ 选项3',
    checkbox: '☐ 选项1 ☐ 选项2 ☐ 选项3',
    select: '请选择...',
    rating: '★★★★★ 评分',
    date: 'YYYY-MM-DD',
    number: '请输入数字'
  }
  return placeholders[type] || '表单字段'
}

// 编辑表单
const updateForm = (row) => {
  router.push({ name: 'formEditor', query: { id: row.ID } })
}

// 预览表单
const previewForm = (row) => {
  router.push({ name: 'formPreview', query: { id: row.ID } })
}

// 查看提交数据
const viewSubmissions = (row) => {
  router.push({ name: 'submissionList', query: { id: row.ID } })
}

// 复制表单链接
const copyFormLink = async(row) => {
  // 根据表单类型生成不同的链接
  let link
  if (row.formType === 'generated') {
    link = `${window.location.origin}/#/generated/form/${row.ID}`
  } else {
    link = `${window.location.origin}/#/form/${row.ID}`
  }
  
  try {
    await navigator.clipboard.writeText(link)
    ElMessage.success('链接已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败，请手动复制：' + link)
  }
}

// 发布表单
const publishForm = async(row) => {
  try {
    await ElMessageBox.confirm('发布后用户即可开始填写表单，确定要发布吗？', '发布表单', {
      confirmButtonText: '发布',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await publishFormApi({ id: row.ID })
    if (res.code === 0) {
      ElMessage.success('表单发布成功')
      getTableData()
    }
  } catch (error) {
    // 用户取消操作
  }
}

// 关闭表单
const closeForm = async(row) => {
  try {
    await ElMessageBox.confirm('关闭后将无法继续接收新的提交，确定要关闭吗？', '关闭表单', {
      confirmButtonText: '关闭',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await closeFormApi({ id: row.ID })
    if (res.code === 0) {
      ElMessage.success('表单已关闭')
      getTableData()
    }
  } catch (error) {
    // 用户取消操作
  }
}

// 删除表单
const deleteForm = async(row) => {
  try {
    await ElMessageBox.confirm('删除后将无法恢复，所有提交数据也将被删除，确定要删除吗？', '删除表单', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'error'
    })
    
    const res = await deleteFormApi({ id: row.ID })
    if (res.code === 0) {
      ElMessage.success('删除成功')
      getTableData()
    }
  } catch (error) {
    // 用户取消操作
  }
}

// 处理模板标签切换
const handleTemplateTabClick = (tab) => {
  // 可以在这里加载对应分类的模板数据
  console.log('切换到模板分类:', tab.props.name)
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped>
/* 创建区域样式 */
.gva-create-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.create-header {
  text-align: center;
  margin-bottom: 32px;
}

.create-header h2 {
  font-size: 28px;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.create-header p {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.quick-create {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.create-blank {
  background: rgba(255, 255, 255, 0.1);
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.create-blank:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.blank-form-icon {
  margin-bottom: 16px;
  opacity: 0.8;
}

.template-gallery {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 24px;
}

.template-gallery h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.template-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 16px;
}

.template-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.template-preview {
  flex-shrink: 0;
  opacity: 0.8;
}

.template-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}

.template-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.4;
}

.usage-count {
  font-size: 12px;
  opacity: 0.7;
}

/* 表单列表区域 */
.gva-forms-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.view-options {
  display: flex;
  gap: 8px;
}

/* 搜索框样式 */
.gva-search-box {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  border: 1px solid #e4e7ed;
}

/* 网格视图样式 */
.forms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.form-card {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.form-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.form-card-header {
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-preview {
  cursor: pointer;
  color: #1976d2;
  transition: transform 0.2s ease;
}

.form-preview:hover {
  transform: scale(1.1);
}

.form-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.form-card-content {
  padding: 16px;
}

.form-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
  cursor: pointer;
  transition: color 0.2s ease;
}

.form-title:hover {
  color: #409eff;
}

.form-description {
  font-size: 14px;
  color: #606266;
  margin: 0 0 16px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.form-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.form-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 创建新表单卡片 */
.create-new-card {
  border: 2px dashed #c0c4cc;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.create-new-card:hover {
  border-color: #409eff;
  background: #ecf5ff;
  transform: none;
  box-shadow: none;
}

.create-new-content {
  text-align: center;
  color: #909399;
}

.create-new-content p {
  margin: 12px 0 0 0;
  font-size: 14px;
}

/* 列表视图样式 */
.gva-table-box {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  margin-bottom: 24px;
}

.form-info {
  text-align: left;
}

.form-title-link {
  color: #409eff;
  cursor: pointer;
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.form-title-link:hover {
  color: #66b1ff;
}

.form-desc {
  color: #909399;
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}

/* 分页样式 */
.gva-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 模板预览对话框 */
.template-preview-content {
  padding: 20px 0;
}

.template-description {
  color: #606266;
  font-size: 14px;
  margin-bottom: 24px;
}

.template-fields-preview {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background: #fafbfc;
}

.field-preview {
  margin-bottom: 20px;
}

.field-preview:last-child {
  margin-bottom: 0;
}

.field-preview label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: #303133;
}

.field-placeholder {
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  color: #c0c4cc;
  font-size: 14px;
}

.field-placeholder.rating {
  color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .quick-create {
    flex-direction: column;
    gap: 20px;
  }
  
  .forms-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .gva-search-box .demo-form-inline {
    display: block;
  }
  
  .gva-search-box .el-form-item {
    display: block;
    margin-bottom: 16px;
  }
}

/* Element Plus 标签页样式覆盖 */
:deep(.el-tabs__header) {
  margin: 0 0 20px 0;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-tabs__item.is-active) {
  color: white;
}

:deep(.el-tabs__active-bar) {
  background-color: white;
}
</style>